<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>配置用户</title>
	<script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
	<script src='<c:url value="/js/boot.js"></c:url>'></script>
	<script src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>

	<style>
		html,body{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.Basic_course_content{
			width: 1920px;
			width: 100%;
		}
		.Basic_course_content_content{
			width: 1280px;
			margin: 0 auto;
		}
		.Basic_course_content_content_content{

			width: 780px;
 		    margin-left: 104px;
    		margin-top: 24px;
			text-align: left;
		}
		.Basic_course_content_content_content_title{
			color: #b8b8b8;
			font-size: 16px;
			padding-bottom: 1px;
			border-bottom: 2px solid #2459aa;
			font-weight: 800;
		}
		.Basic_course_content_content_content_title ul{
			padding:0;
			margin:10px;
		}
		.Basic_course_content_content_content_title li{
			display: inline-block;
			margin-right: 55px;
		}
		.Basic_course_content_content_content_title div{
			display: inline-block;
			height: 20px;
			width: 20px;
			border-radius: 50%;
			background: #b8b8b8;
		}
		.Basic_course_content_content_content_title li>div>span{
			color:white;
			z-index:1;
			position:relative;
			left:6px;
			top:-2px;
			font-weight:800;
			font-size:13px;
		}
		.Basic_course_content_content_content_content{
			padding: 25px 0;
		}
		.Basic_course_content_content_content_content>ul>li{
			padding: 16px 0;
		}
		.Basic_course_content_content_content_content>ul{
			margin: 0;
			padding: 0;
			margin-bottom: 16px;
		}
		.Basic_course_content_content_content_content>ul>li>div>span{
			/*float: left;*/
			font-size: 16px;
			padding: 4px 0;
		}
		.Basic_course_content_content_content_content>ul>li>div>span>font{
			color: #ff0000;
		}
		.Basic_course_content_content_content_content>ul>li>div>input{
			width: 420px;
			padding: 5px 0;
			padding-left: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>select{
			padding: 5px 0;
			padding-left: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>textarea{
			width: 420px;
			padding: 5px;
    		margin-top: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>select>option{
			padding: 3px;
		}
		.Basic_course_baocun{
			width: 78px;
			height: 32px;
			text-align: center;
			background: #2459aa;
			color: #fff;
			font-size: 16px;
			line-height: 32px;
			border-radius: 3px;
			margin-left: 18px; 
			display: inline-block;
			margin-right: 30px;
			cursor: pointer;
		}

		.fixedWidth{
			width: 22px;
		}
		.inlineDisplay{
			display: inline-block;	
		}

		/*以下是表格*/
		.table{
			text-align: center;
			width: 100%;
		    margin: auto;
		    border-collapse: collapse;
			margin-bottom: 35px;
			color: #707070;
		}
		.table>thead>tr{
			height: 33px;
			font-weight: inherit;
			background: #82b4ee; 
			color: #fff;
		}

		.table>tbody>tr:last-child{
			border-bottom: 2px solid #82b4ee;
		}
		.table td{
			width: 25%;
		    padding: 8px;
		    border-top: 1px solid #82b4ee;
		}
		.table>tbody>tr>td:nth-child(3)>a{
			background: white;
   			border: 2px solid #707070;
    		padding: 0px 7px;
    		border-radius: 11px;
			cursor: pointer;
			font-size: 14px;
		}
		.table>tbody>tr>td:nth-child(3)>a:hover{
			
			border: 2px solid #ff7753;
			color:#ff7753;
		}
		.sublist{
			width: 63px;
		    line-height: 25px;
		    text-align: center;
		    padding: 1px;
		    color: #2459aa;
		    margin-right: 28px !important;
		    border-radius: 3px;
		    cursor: pointer;
		    font-weight: 600;
		}
		.sublist:hover{
			color: white;
			background:#82bcff;
		}

	</style>
</head>
<body>
	<div class="Basic_course_content">
		<div class="Basic_course_content_content">
			<div class="Basic_course_content_content_content">
				<div class="Basic_course_content_content_content_title">
					<ul>
						<li>
							<div><span style="">1</span></div>
							<span>新建问卷</span>
						</li>
						<li>
							<div><span>2</span></div>
							<span>问卷组装</span>
						</li>
						<li style="color:#2459aa;">
							<div style="color:#2459aa;background:#2459aa;"><span>3</span></div>
							<span>配置用户</span>
						</li>
					</ul>
					<ul style="font-weight: 100;font-size: 13px;float: right;margin: -30px -25px 0px 0px;">
						<li class="sublist" id="addNewUser">新增用户</li>
						<li class="sublist" onclick="save()">保存</li>
						<li class="sublist" onclick="lastStep()">上一步</li>
					</ul>
				</div>
				<div class="Basic_course_content_content_content_content">
					<ul>
						<li>
							<div>
								<span>已添加<input type="text" readonly="readonly" id="userNum" style="color:red;border:none;width:30px;text-align:center;">个用户</span>
							</div>
						</li>
					</ul> 
					<table class="table table">
				    	<thead>
					        <tr>
					          <td>账号</td>
					          <td>姓名</td>
					          <td>操作</td>
					        </tr>
					    </thead>
				      	<tbody id="Examination_details">
				      	</tbody>
				    </table>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	/* $("#Examination_details >tr >td:nth-child(3) >a").click(function(){
		console.log(1);
		$(this).parent("td").parent("tr").remove();
		$("#userNum").val($("#Examination_details >tr").length)
	}); */

	var rootPath = '${rootPath}';
	var paperId = '${paperId}';
	var userId="";
	var old_userId="";
	var uuid = "";
	var isSave=false;
	$(function(){
		getold_userId();
		if(!$("#userNum").val()){
			$("#userNum").val("0");
		}
	});
	
	function getold_userId(){
		var url = rootPath + "/surveyPaper/mapData/"+ paperId;
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{},
			success:function(data){
				if(data){
					old_userId = data.object;
					userId = data.object;
					if(old_userId){
						getUserList(old_userId);
					}
				}
			}
		});
	}
	
	$("#addNewUser").click(function(){
		mini.open({
			url : rootPath + "/surveyPaper/userlistMv",
			title : "选择列表",
			width : 500,
			height : 600,
			onload : function() {
			},
			ondestroy : function(action) {
				if (action == "close") {
					return;
				} else {
					var str = action.split(",");
					if(!userId){
						userId = action;
					}else{
						for (var i = 0; i < str.length; i++) {
							if (userId.indexOf(str[i]) < 0) {
									userId += "," + str[i];
							}
						}
					}
					getUserList(userId);
				}
			}
			});
	});
	function getUserList(id){
		var url = rootPath + "/surveyPaper/userData";
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{'data':id},
			success:function(data){
				if(data){
					show(data);
				}
			}
		});
	}
	
	function show(data){
		var html = "";
		uuid = "";
		for(var i = 0;i<data.length;i++){
			html+="<tr>"
	          	+"<td><span>"+data[i].nickname+"</span></td>"
	          	+"<td><span>"+data[i].name+"</span></td>"
	          	+"<td><a href=\"javascript:_delete("+data[i].id+")\">删除</a></td>"
	        +"</tr>";
	        if(!uuid){
	        	uuid = data[i].uuid;
	        }else{
	        	uuid += "," + data[i].uuid;
	        }
		}
		$("#Examination_details").html(html);
		$("#Examination_details >tr >td:nth-child(3) >a").click(function(){
			$(this).parent("td").parent("tr").remove();
			$("#userNum").val($("#Examination_details >tr").length);
		});
		$("#userNum").val($("#Examination_details >tr").length);
	}
	function save(callFunction){
		var num = $("#userNum").val();
		if(num == 0){
			top.commonTools.showTip("请添加用户!", 2);
			return;
		}
		if(userId == old_userId){
			parent.status1();
			datagrid1.reload();
			return;
		}
		var url = rootPath + "/surveyPaper/addObject/"+paperId;
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{'data':userId,'uuid':uuid},
			success:function(data){
				if(data){
					isSave = true;
					top.commonTools.showTip("保存成功", 1);
					if(callFunction){
						callFunction();
					}else{
						parent.status1();
						datagrid1.reload();
					}
				}else{
					top.commonTools.showTip("保存失败!", 2);
				}
			}
		});
	}
	
	function _delete(id){
		var i = userId.indexOf(id);
		if (userId.length == 1) {
			userId = "";
		}else if(i==0){
			userId = userId.replace(id+",","");
		}else{
			userId = userId.replace(","+id,"");
		}
		console.log(userId);
	}
	
	function lastStep(){
		if(isSave){
			location.href = rootPath + "/surveyPaper/packages/"+ paperId;
		}else{
			save(function() {
				location.href = rootPath + "/surveyPaper/packages/" + paperId;
			});
		}
	}
</script>
</html>